<!-- *Author: 黄旗, *Date: 2020-08-04 15:45:59 -->
<template>
    <Modal :width="600" v-model='modal' title='添加站点' transfer :mask-closable='false' @on-cancel='canceledit(modalname)' draggable>
        <Form :label-width='130' :ref='modalname' :model='modalparams' :rules='createRules'>
            <!-- <FormItem label='网站域名：' prop='domain'>
                <Input style="width: 280px" clearable v-model='modalparams.domain' placeholder='如 sxehao.com，域名结尾不要带反斜杠“/”' /> <Checkbox class="ivu-ml-16" v-model="check">绑定更多域名</Checkbox>
            </FormItem> -->
            <FormItem label='网站域名：' prop='domain'>
                <Input style="width: 280px" clearable v-model='modalparams.domain' placeholder='如 sxehao.com，域名结尾不要带反斜杠“/”' /> <Checkbox class="ivu-ml-16" v-model="check">绑定更多域名</Checkbox>
            </FormItem>
            <FormItem v-if="check" label='绑定更多域名：'>
                <Input @on-blur="textareaBlur" type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" style="width: 280px" clearable v-model='modalparams.other_domain' placeholder='绑定多个域名，1行1个域名' />
            </FormItem>
            <!-- <FormItem label='网站域名：' prop='domain'>
                <Input type="textarea" v-model='modalparams.domain' :autosize="{ minRows: 2, maxRows: 6 }" style="width: 280px" clearable  placeholder='绑定多个域名，1行1个域名' />
            </FormItem> -->
            <FormItem label='站点类型：' prop='site_type'>
                <RadioGroup v-model="modalparams.site_type">
                    <Radio :label="item.value" v-for="item of condition.site_type_list" :key="item.value">{{item.label}}</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem label='推广类型：' prop='extension_type'>
                <RadioGroup v-model="modalparams.extension_type">
                    <Radio :label="item.value" v-for="item of condition.extension_type_list" :key="item.value">{{item.label}}</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem label='数据库类型：' prop='db_type'>
                <RadioGroup v-model="modalparams.db_type">
                    <Radio label="1">新建数据库</Radio>
                    <Radio label="2">共用数据库</Radio>
                    <Radio label="3">复用数据库</Radio>
                    <Radio label="4">无数据库</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem v-if="modalparams.db_type == 2" label='共用数据库：' prop='db_site_id' >
                <Select v-model="modalparams.db_site_id" style="width:280px" filterable clearable>
                    <Option v-for="item in siteInfo.db_list" :value="item.id" :key="item.id">{{ item.domain }}</Option>
                </Select>
                <p><font class="red">注：当pc站和手机站共用1个数据库时，推荐选择此项</font></p>
            </FormItem>
            <FormItem v-if="modalparams.db_type == 3" label='复用数据库：' prop='db_site_id'>
                <Select v-model="modalparams.db_site_id" style="width:280px" filterable clearable>
                    <Option v-for="item in siteInfo.db_list" :value="item.id" :key="item.id">{{ item.domain }}</Option>
                </Select>
                <p><font class="red">注：选择此项，会复制一份当前选择的域名数据库作为新域名数据库</font></p>
            </FormItem>
            <FormItem label='所属服务器：' prop='vps_id'>
                <Select v-model="modalparams.vps_id" style="width:280px" filterable>
                    <Option v-for="item in siteInfo.vps_list" :value="item.id" :key="item.id">{{ item.public_ip }} - {{ item.alias_name }}</Option>
                </Select>
            </FormItem>
            <FormItem label='备注：'>
                <Input type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" style="width: 280px" clearable v-model='modalparams.remark' placeholder='请输入备注' />
            </FormItem>
        </Form>
        <div slot='footer'>
            <Button @click='canceledit(modalname)'>取消</Button>
            <Button type='primary' :loading="subloading" @click='submitedit(modalname)'>{{subloading?'站点创建中':'保存'}}</Button>
        </div>
    </Modal>
</template>

<script>
    import { siteindexcreate, siteindexcreateinfo } from '@api/httpsetting'
    export default {
        props: ['condition'],
        name: '',
        data () {
            return {
                modalname: 'modalname',
                modal: false,
                check: false,
                subloading: false,
                modalparams: { domain: '', other_domain: '', site_type: 1, extension_type: '', db_type: '1', db_site_id: '', vps_id: '', remark: '' },
                createRules: {
                    // domain: [{ required: true, message: '请输入网站域名', trigger: 'blur' }],
                    domain: [{ required: true, validator: this.validatePass, trigger: 'blur' }],
                    other_domain: [{ required: false, validator: this.otherdomainPass, trigger: 'blur' }],
                    site_type: [{ required: true, type: 'number', message: '请选择站点类型', trigger: 'change' }],
                    extension_type: [{ required: true, type: 'number', message: '请选择推广类型', trigger: 'change' }],
                    db_type: [{ required: true, message: '请选择数据库类型', trigger: 'blur' }],
                    db_site_id: [{ required: true, message: '请选择数据库', trigger: 'blur' }],
                    vps_id: [{ required: true, message: '请选择所属服务器', trigger: 'change' }]
                },
                siteInfo: {},
                other_domain:''
            };
        },
        /* 函数方法集合 */
        methods: {
            validatePass (rule, value, callback) {
                let name=value.toLowerCase()
                if (name === '') {
                    callback(new Error('请输入网站域名'));
                } else if (name !== '') {
                    let arr = []
                    arr = name.split(',')
                    const domain = arr.map(item => {
                        return item.replace(/https?:\/\//gi, '').replace(/\/.*$/gi, '')
                    })
                    this.modalparams.domain = domain.join(',')
                    callback();
                } else {
                    callback();
                }
            },
            otherdomainPass (rule, value, callback) {
                 let name=value.toLowerCase()
                if (name === '') {
                    callback(new Error('请输入网站域名'));
                } else if (name !== '') {
                    let arr = []
                    arr = name.split('\n')
                    const domain = arr.map(item => {
                        return item.replace(/https?:\/\//gi, '').replace(/\/.*$/gi, '')
                    })
                    this.modalparams.domain = domain.join(',')
                } else {
                    callback();
                }
            },
            textareaBlur () {
                let arr = []
                let other_domain= this.modalparams.other_domain.toLowerCase()
                arr = other_domain.split('\n')

                const domain = arr.map(item => {
                    return item.replace(/https?:\/\//gi, '').replace(/\/.*$/gi, '')
                })
                this.modalparams.other_domain = domain.join('\n')
            },
            /* @函数功能: 初始化 */
            initial () {
                this.$refs[this.modalname].resetFields();
                this.modalparams = { domain: '', site_type: 1, extension_type: '', db_type: '1', db_site_id: '', vps_id: '', remark: '' }
                this.check = false
                this.askData()
            },
            askData () {
                siteindexcreateinfo().then(res => {
                    this.siteInfo = res.condition                    
                    this.modal = true
                })
            }, // 请求数据处理
            canceledit (name) {
                this.$refs[name].resetFields();
                this.modal = false
            },
            submitedit (name) {
                this.$refs[name].validate((valid) => {	
                    if (valid) {
                        this.subloading = true
                        // this.modalparams.domain = this.modalparams.domain.replace(/\s+/g, '')
                        if (!this.check) {
                            this.modalparams.other_domain = ''
                        } else {
                            const other_domain=this.modalparams.other_domain.split('\n')
                            this.other_domain = other_domain.join(',').replace(/ /g, '')
                        }
                        const params={
                            domain:this.modalparams.domain.replace(/\s+/g, ''),
                            other_domain:this.modalparams.other_domain?this.other_domain:'',
                            site_type:this.modalparams.site_type,
                            extension_type:this.modalparams.extension_type,
                            db_type:this.modalparams.db_type,
                            db_site_id:this.modalparams.db_site_id,
                            vps_id:this.modalparams.vps_id,
                            is_focus:this.modalparams.is_focus,
                            remark:this.modalparams.remark
                        }
                        siteindexcreate(params).then(() => {                            
                            this.$Message.success('添加成功')
                            this.$emit('askData')
                            this.subloading = false
                            this.modal = false
                        }).catch((e) => {
                            this.subloading = false
                        })
                    }
                })
            }
        }
    }
</script>
